<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Highcharts Example</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {

			$('#container').highcharts({
				chart: {
					type: 'pyramid',
					marginRight: 100
				},
				title: {
					text: 'Sales pyramid',
					x: -50
				},
				plotOptions: {
					series: {
						dataLabels: {
							enabled: true,
							format: '<b>{point.name}</b> ({point.y:,.0f})',
							color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
							softConnector: true
						}
					}
				},
				legend: {
					enabled: false
				},
				series: [{
					name: 'Unique users',
					data: [
						['Website visits', 15654],
						['Downloads', 4064],
						['Requested price list', 1987],
						['Invoice sent', 976],
						['Finalized', 846]
					]
				}]
			});
		});
	</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/funnel.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>

</body>
</html>
